var Visualizer = (function () {
    function Visualizer() {
        this.file = null;
        this.audioContext = null;
        this.source = null;
    }
    Visualizer.prototype._prepareAPI = function () {
        window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
        window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
        try {
            this.audioContext = new AudioContext();
        }
        catch (e) {
            console.log('并不支持AudioContext:(');
            console.log(e);
        }
    };
    Visualizer.prototype.loadSound = function (url) {
        var _this = this;
        var request = new XMLHttpRequest();
        request.open('get', url, true);
        request.responseType = 'arraybuffer';
        request.onload = function () {
            _this.file = request.response;
            _this._prepareAPI();
            _this._start();
        };
        request.send();
    };
    Visualizer.prototype._start = function () {
        var _this = this;
        var audioContext = this.audioContext;
        audioContext.decodeAudioData(this.file, function (buffer) { return _this._visualize(audioContext, buffer); }, function (e) { return console.log('木有转码成功：' + e); });
    };
    Visualizer.prototype._visualize = function (audioContext, buffer) {
        var audioBufferSouceNode = audioContext.createBufferSource(), analyser = audioContext.createAnalyser();
        audioBufferSouceNode.connect(analyser);
        analyser.connect(audioContext.destination);
        audioBufferSouceNode.buffer = buffer;
        audioBufferSouceNode.start(0);
        this._drawSpectrum(analyser);
    };
    Visualizer.prototype._drawSpectrum = function (analyser) {
        var canvas = document.getElementById('canvas'), WIDTH = canvas.width, HEIGHT = canvas.height, meterWidth = 10, capHeight = 2, meterNum = 800 / (10 + 2), capYPositionArray = [], capStyle = '#fff', ctx = canvas.getContext('2d'), gradient = ctx.createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(1, '#0f0');
        gradient.addColorStop(0.5, '#ff0');
        gradient.addColorStop(0, '#f00');
        requestAnimationFrame(function drawMeter() {
            var array = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(array);
            var step = Math.round(array.length / meterNum);
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            for (var i = 0; i < meterNum; i++) {
                var value = array[i * step];
                if (capYPositionArray.length < Math.round(meterNum)) {
                    capYPositionArray.push(value);
                }
                ctx.fileStyle = capStyle;
                if (value < capYPositionArray[i]) {
                    ctx.fillRect(i * 12, HEIGHT - (--capYPositionArray[i]), meterWidth, capHeight);
                }
                else {
                    ctx.fillRect(i * 12, HEIGHT - (--capYPositionArray[i]), meterWidth, capHeight);
                    capYPositionArray[i] = value;
                }
                ctx.fillStyle = gradient;
                ctx.fillRect(i * 12, HEIGHT - value + capHeight, meterWidth, HEIGHT);
            }
            requestAnimationFrame(drawMeter);
        });
    };
    return Visualizer;
}());
var vis = new Visualizer();
vis.loadSound('audio/hope.mp3');
